import './page.css'

export default function Filter() {
  return (
    <div className="flex flex-wrap m-auto gap-y-3">
      <div className="flex-1/2 border-red-500">
        <div className="flow-root w-[120] h-[80px] bg-amber-400 rounded-sm">原始样式</div>
      </div>

      <div className="flex-1/2 border-red-500">
        <div className="flow-root w-[120] h-[80px] bg-amber-400 rounded-sm blur-[2px]">filter: blur(2px);</div>
      </div>

      <div className="flex-1/2 border-red-500 text-fuchsia-500">
        <div className="flow-root w-[120px] h-[80px] bg-amber-400 rounded-sm brightness-20">
          filter: brightness(20%);
        </div>

        <div className="flow-root w-[120px] h-[80px] bg-amber-400 rounded-sm brightness-50">
          filter: brightness(50%);
        </div>

        <div className="flow-root w-[120px] h-[80px] bg-amber-400 rounded-sm brightness-80">
          filter: brightness(80%);
        </div>
      </div>

      <div className="flex-1/2 border-red-500">
        <div className="flow-root w-[120] h-[80px] bg-amber-400 rounded-sm contrast-50">filter: contrast(50%);</div>

        <div className="flow-root w-[120] h-[80px] bg-amber-400 rounded-sm contrast-200">filter: contrast(200%);</div>
      </div>

      <div className="flex-1/2 border-red-500">
        <div className="flow-root w-[120] h-[80px] bg-amber-400 rounded-sm drop-shadow-blue-500 drop-shadow-sm">
          drop-shadow-amber-400 drop-shadow-sm
        </div>
        Drop Shadow 能正确处理异形Boder
        <div className="caret-outer w-[140px] h-[70px]">
          <div className="caret drop-shadow-blue-500 drop-shadow-md"></div>
        </div>
        Box Shadow 不行
        <div className="caret-outer w-[140px] h-[70px]">
          <div className="caret shadow-xl shadow-amber-800"></div>
        </div>
      </div>

      <div className="quote flex-1/2 text-blue-500">
        <a href="https://devdocs.io/css-filter-effects/" target="_blank" className="text-cyan-600" rel="noreferrer">
          参考链接
        </a>
      </div>
    </div>
  )
}
